<template>
  <div class="bar-chartv2-root">
    <nf-charts :options="options"></nf-charts>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { colorHexToRgb } from "@wenqian/nf-ui";

const barColor = [
  {
    main: "#00feee",
    top: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#00feee" },
        { offset: 0.569, color: "#02ecd9" },
        { offset: 1, color: "#07b0fe" },
      ],
      false,
    ),
    center: [
      { offset: 0, color: "#00feee" },
      { offset: 0.475, color: "rgba(103, 236, 228, 0.525)" },
      {
        offset: 1,
        color: "rgba(216, 216, 216, 0)",
      },
    ],
    bottom: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#397d90" },
        { offset: 1, color: "#0a497e" },
      ],
      false,
    ),
    bottom1: "rgba(20, 244, 228, 0.142)",
  },
  {
    main: "#eebfac",
    top: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#ffcab3" },
        { offset: 0.569, color: "#feac9d" },
        { offset: 1, color: "#e1795b" },
      ],
      false,
    ),
    center: [
      { offset: 0, color: "#eebfac" },
      { offset: 1, color: colorHexToRgb("d8d8d8", 0) },
    ],
    bottom: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#88596c" },
        { offset: 1, color: colorHexToRgb("514564", 0.694) },
      ],
      false,
    ),
    bottom1: colorHexToRgb("eebfac", 0.142),
  },
  {
    main: "#dfc5f9",
    top: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#dfc5f9" },
        { offset: 0.731, color: "#c781f5" },
        { offset: 1, color: "#bd52eb" },
      ],
      false,
    ),
    center: [
      { offset: 0, color: "#d2a5fd" },
      { offset: 1, color: colorHexToRgb("d8d8d8", 0) },
    ],
    bottom: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#64339a" },
        { offset: 0.057, color: "#623498" },
        { offset: 1, color: "#483f7f" },
      ],
      false,
    ),
    bottom1: colorHexToRgb("dfc5f9", 0.142),
  },
];
export default {
  name: "Bar3",
  props: {
    initTableTitle: {
      type: Object,
      default: () => ({
        name: "平台", // 默认必需字段name,对应chartData中的键
        login: "登录",
        post: "发帖",
        person: "互动人",
      }),
    },
    type: {
      type: String,
      default: "chart", // table
    },
    data: {
      type: Array,
      default: () => [
        { name: "中国台湾", value: 120 },
        { name: "美国", value: 100 },
        { name: "日本", value: 80 },
      ],
    },
  },
  data() {
    return { keyword: "" };
  },
  computed: {
    options() {
      const xAxis = this.data.map((item) => item.name);
      const yAxis = this.data.map((item) => item.value);
      return {
        backgroundColor: "",
        tooltip: { trigger: "item" },
        grid: {
          left: "5%",
          top: "10%",
          right: "5%",
          bottom: "10%",
        },
        xAxis: [
          {
            data: xAxis,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
              margin: 20,
            },

            axisLine: {
              show: false, // 不显示x轴
              lineStyle: { color: "#E2E8EC" },
            },
            axisTick: { show: false },
            boundaryGap: true,
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "#03202E",
              },
            },
          },
        ],
        yAxis: [
          {
            show: false,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#E2E8EC",
                type: "dashed",
              },
            },
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: { color: "#E2E8EC" },
            },
            axisLabel: {
              textStyle: {
                color: "#38455D",
                fontSize: 12,
              },
            },
          },
        ],
        series: [
          {
            // 柱底圆片1
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 20], // 调整截面形状
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              normal: { color: (params) => barColor[params.dataIndex].bottom },
            },
            data: yAxis,
          },

          {
            // 柱底圆片2
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 20], // 调整截面形状
            symbolOffset: [0, 6],
            z: 12,
            itemStyle: {
              normal: { color: (params) => barColor[params.dataIndex].bottom1 },
            },
            data: yAxis,
          },

          // 柱体
          {
            name: "",
            type: "bar",
            barWidth: 40,
            barGap: "0%",
            itemStyle: {
              normal: {
                color: (params) => ({
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: barColor[params.dataIndex].center || [],
                }),
              },
            },
            zlevel: 2,
            data: yAxis,
          },

          // 柱顶圆片
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 20], // 调整截面形状
            symbolOffset: [0, -10],
            z: 12,
            zlevel: 3,
            symbolPosition: "end",
            itemStyle: {
              normal: { color: (params) => barColor[params.dataIndex].top },
            },
            data: yAxis,
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#def8ff",
                fontWeight: "bold",
                fontsize: "14px",
              },
            },
          },

          ...xAxis.map((item, index) => ({
            name: "",
            type: "scatter",
            data: [
              { value: [item, 0], symbolOffset: [10, "-500%"], symbolSize: 10 },
              { value: [item, 0], symbolOffset: [-6, "-600%"], symbolSize: 5 },
              { value: [item, 0], symbolOffset: [5, "-180%"], symbolSize: 11 },
              { value: [item, 0], symbolOffset: [-10, "-250%"], symbolSize: 5 },
              { value: [item, 0], symbolOffset: [-2, "-50%"], symbolSize: 7 },
              // { value: [item, 8], symbolOffset: [0, '-100%'], symbolSize: parseInt((Math.random() * 10).toFixed(0), 10) + 2 }
            ].slice(index, 5),
            // 取消提示
            tooltip: { formatter: () => "" },
            zlevel: 1,
          })),
        ],
      };
    },
    column() {
      if (!Object.keys(this.data).length) return [];
      return Object.entries(this.initTableTitle).map(([key, value]) => ({
        label: value,
        prop: key,
      }));
    },
  },
};
</script>

<style scoped lang="scss">
.bar-chartv2-root {
  width: 100%;
  height: 300px;
}
</style>
